<template>
    <div>
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">我的旅行红包</h1>
            <div class="header-btnRight">
                <div class="header-btnRight" @click="closeRoleFn">使用规则</div>
            </div>
        </div>

        <div  class="ticket-list">
            <div class="ticket-list-item"  v-for="item in ticketArr">
                <div class="ticket-list-item-left">
                    <div class="ticket-list-item-left-name">{{item.coupon_name}}</div>
                    <div class="ticket-list-item-left-priceWrap">
                        <div class="ticket-list-item-left-price" v-if="item.discount">
                            {{item.discount*10}}
                            <span class="ticket-list-item-left-price-sign">折</span>
                        </div>
                        <div class="ticket-list-item-left-price"  v-if="item.full_reduction">
                            <span class="ticket-list-item-left-price-sign">¥</span>
                            {{item.full_reduction}}
                        </div>
                        <div class="ticket-list-item-left-text">满 {{item.coupon_usecondition}} 元可用</div>
                    </div>

                    <div class="ticket-list-item-left-text">有效期：{{item.validityperiod}} </div>
                </div>
                <div class="ticket-list-item-right" v-if="!item.usestatus">
                    <router-link to="/" class="header-btnLeft">
                        <div class="ticket-list-item-right-start" >去使用</div>
                    </router-link>
                </div>
                <div class="ticket-list-item-right" v-if="item.usestatus==1">
                    <div class="ticket-list-item-right-end" >已使用</div>
                </div>
                <div class="ticket-list-item-right" v-if="item.usestatus==2">
                    <div class="ticket-list-item-right-end" >已过期</div>
                </div>
                <img class="ticket-list-item-bg" src="../assets/buy-ticket-item-bg.png"/>
            </div>
        </div>
        <TicketRole :roleInfoShow="roleInfoShowState" @closeRole="closeRoleFn"></TicketRole>
    </div>
</template>

<script>
    import wxShare from "../store/wxShare"
    import TicketRole from "../components/TicketRole"
    export default {
        name: "My-ticket",
        data(){
            return{
                ticketArr:[],
                roleInfoShowState: false
            }
        },
        components: {
            TicketRole
        },
        methods:{
            closeRoleFn(state){
                this.roleInfoShowState = state;
            },
            getData() {
                let _that = this;
                _that.axios.post('wap/member/coupon',{},true)
                    .then(res => {
                        _that.ticketArr=res.data;
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的旅行红包', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.getData();
            this.share();

        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight{
            color: #5D5D5D;
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .ticket{
        padding: rpx(30);
        &-title{
            padding: rpx(60) 0;
            font-size: rpx(36);
        }
        &-list{
            width: rpx(690);
            margin: auto;
            &-item{
                position: relative;
                width: 100%;
                height: rpx(160);
                margin-bottom: rpx(30);
                &-bg{
                    position: absolute;
                    width: rpx(690);
                    height: rpx(160);
                    z-index: 1;
                    left: 0;
                    top: 0;
                }
                &-left{
                    position: absolute;
                    width: rpx(370);
                    height: rpx(160);
                    z-index: 2;
                    left:rpx(30);
                    top: 0;
                    font-size: rpx(20);
                    color:$color0 ;
                    &-name{
                        padding: rpx(20) 0;
                        font-weight: bold;
                    }
                    &-priceWrap{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    &-price{
                        // padding-top: rpx(20);
                        font-size: rpx(50);
                        &-sign{
                            font-size: rpx(36);
                        }
                    }
                    &-text{
                        padding-top: rpx(6)
                    }
                }
                &-right{
                    position: absolute;
                    width: rpx(240);
                    height: rpx(160);
                    z-index: 2;
                    right: 0;
                    top: 0;
                    &-start{
                        margin-top: rpx(50);
                        margin-left: rpx(26);
                        display: block;
                        padding: rpx(15) ;
                        width: rpx(170);
                        text-align: center;
                        border-radius: $radius30;
                        background: $color0;
                        color: $color7;
                        font-size: rpx(32);
                    }
                    &-end{
                        margin-top: rpx(50);
                        margin-left: rpx(26);
                        display: block;
                        padding: rpx(15) ;
                        width: rpx(170);
                        text-align: center;
                        border-radius: $radius30;
                        background: #b5b5b5;
                        color: $color0;
                        font-size: rpx(32);
                    }
                }
            }
        }
    }

</style>